<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
    <div id="app">
        <div v-if="bookListSize > 0">
            <table>
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>书籍名称</th>
                        <th>出版日期</th>
                        <th>价格</th>
                        <th>购买数量</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody >
                    <tr v-for="(item, index) in bookList" :key="index">
                        <td>{{index+1}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.date}}</td>
                        <td>￥{{item.price.toFixed(2)}}</td>
                        <td>
                            <button @click="reduce(index)">-</button>
                            {{item.number}}
                            <button @click="increase(index)">+</button>
                        </td>
                        <td>
                            <button @click="deleteBook(index)">移除</button>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div>
                <span>￥{{allPrice}}</span>
            </div>
        </div>
        <div v-else>
            购物车暂无物品
        </div>

    </div>


    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
                el: '#app',
                data: {
                    bookList: [
                        {
                            name: '《算法导论》',
                            date: '2006-9',
                            price: 85.00,
                            number: 1,
                        },
                        {
                            name: '《UNIX编程艺术》',
                            date: '2006-2',
                            price: 59.00,
                            number: 1,
                        },
                        {
                            name: '《编程珠玑》',
                            date: '2008-10',
                            price: 39.00,
                            number: 1,
                        },
                        {
                            name: '《代码大全》',
                            date: '2006-3',
                            price: 128.00,
                            number: 1,
                        }
                    ]
                },
                methods: {
                    // 增加数量 
                    increase(index){
                        //console.log(index + "+++");
                        this.bookList[index].number ++;
                    },
                    // 减少数量
                    reduce(index){
                        //console.log(index + "---");
                        if (this.bookList[index].number > 0) {
                            this.bookList[index].number--;
                        }
                    },
                    // 移除书籍
                    deleteBook(index){
                        this.bookList.splice(index, 1);
                    }
                },
                computed: {
                    // 全部金额
                    allPrice(){
                        let sum = 0.00;
                        for (let index = 0; index < this.bookList.length; index++) {
                            sum = sum + (this.bookList[index].price * this.bookList[index].number);
                        }
                        return sum;
                    },
                    bookListSize(){
                        return this.bookList.length;
                    }
                },
                filters: {
                    showPrice(price){
                        return "￥" + price.toFixed(2);
                    }
                }
            })
    </script>
    <script>
        /**
         * 拓展：
         *  编程范式：命令式编程/声明式编程
         *          面向对象编程（第一公民：对象）/函数式编程（第一公民：函数）
         *  高阶函数：filter/map/reduce
         *      1. filter:中回调函数有一个要求：必须返回一个boolean值
         *          true:返回值为true时，函数内部会自动将这次回调的n加入新的数组中
         *          false:当返回为false时，函数内部会过滤掉这次的n 
         *      2. map：回调函数会将表达式结果返回写入新的数组
         * 
         *      3. reduce: 对数组中的所有元素进行汇总
         */
        const numbers = [10,20,30,40,50,110,120,130];
        let newNums = numbers.filter(function (n){
            return n < 100;
        });
        console.log(newNums);

        let newNums2 = newNums.map(function (n) {
            return n * 2;
        });
        console.log(newNums2);

        let newNum3 = newNums2.reduce(function (preValue, n) {
            return preValue + n;
        }, 0);
        console.log(newNum3);

        // 简写模式
        let total = numbers.filter(function (n) {
            return n < 100;
        }).map(function (n) {
            return n * 2;
        }).reduce(function (preValue, n) {
            return preValue + n;
        }, 0);

        // 究极极简
        let total2 = numbers.filter(n => n < 100).map(n => n * 2).reduce((preValue, n) => preValue + n);
        console.log(total2);
    </script>
</body>
</html>